<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2023-12-26 13:48:08
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: picker选择器
 * @FilePath: \smart-sports-managee:\project\autopilot\App\components\picker\picker.vue
-->
<template>
  <view class="picker">
    <view class="picker-inner" v-if="param">
      <view class="label multiline-ellipsis">
        <view v-if="param.required" :style="{ color: param.requiredColor }">*</view>{{ param.label }}
      </view>
      <view class="picker-main">
        <picker class="picker-part" @change="bindPickerChange" :value="param.active" :range="param.option"
          :range-key="param.param" :disabled="param.disabled">
          <view class="picker-txt picker-txt-default" v-if="param.active == -1">{{ defaultValue }}</view>
          <view class="picker-txt multiline-ellipsis" v-else>
            <avatar v-if="param.headimg" :key="param.option[param.active][param.match]" shape="circle" :size="25"
              :src="param.option[param.active].headimg" fit="aspectFill"></avatar>
            <view class="txt-inner" :class="{ disabled: param.disabled }">{{ param.option[param.active][param.param] }}
            </view>
          </view>
        </picker>
        <image class="arrow-right-icon" src="../../static/img/icon/arrow-right.png" mode="aspectFit"></image>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
import avatar from "@/components/avatar/avatar";

export default {
  name: "lPicker",
  components: { avatar },
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultValue: "请选择",
    };
  },
  computed: {},
  watch: {},
  created() { },
  onLoad(d) { },
  onShow() { },
  methods: {
    bindPickerChange(e) {
      if (e.detail.value == -1) return;
      this.param.active = e.detail.value;
      this.form[this.param.key] = this.param.option[this.param.active][this.param.match];
      this.$emit("update:form", this.form);
      if (this.param.key == '') {
        this.$emit("change", { value: e.detail.value });
      } else {
        this.$emit("change", { form: this.form, key: this.param.key });
      }
      this.$emit("select", this.param);
    },
  },
};
</script>
<style lang="less" scoped>
.picker {
  .flex();
  padding-left: 40upx;
  background: #ffffff;
  font-size: 32upx;

  .picker-inner {
    .flex();
    padding: 40upx 0;
    width: 100%;
    height: 100%;
  }

  .label {
    .flex(row, flex-start);
    width: 180upx;
    color: #888990;
  }

  .picker-main {
    .flex();
    padding-right: 40upx;
    margin-top: 5upx;
    width: calc(100% - 180upx);

    .picker-part {
      padding-left: 20upx;
      width: calc(100% - 20upx);
      text-align: right;
    }

    .picker-txt {
      .flex(row, flex-end);
      margin-top: -6upx;
      width: calc(100% - 22upx);
      color: #1d256e;
    }

    .picker-txt.picker-txt-default,
    .disabled {
      color: #c7c7c8;
    }

    .txt-inner {
      margin-left: 20upx;
    }
  }
}

.picker:not(:last-child) {
  .picker-inner {
    .border-1px(bottom, #f1f1f2);
  }
}
</style>
